<style lang="less" scoped>
	@border-color:#E3E8EA;//边框颜色
	@font-color:#686E71;//正常字体颜色
	@primary-color:#FE9333;//橘黄色默认颜色
    body,html{
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
    }
    .leftCenter{
        position: absolute;
        width: 240px;
        height: 100%;
    }
    .rightCenter{
        position: absolute;
        width: 87.5%;
        min-width: 1000px;
        left: 240px;
        min-height: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;   
        .title{
            width: 100%;
            height: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            text-align: center;
            margin-bottom: 10px;
            span{
                line-height: 46px;
                display: inline-block;
                margin-right: 60px;
                font-size: 14px;
                cursor: pointer;
            }
            .on{
                color:@primary-color;
                border-bottom: 2px solid @primary-color;
            }
        }
        .info{
            width: 100%;
            padding: 50px;
            background-color: #fff;
            border: 1px solid #E3E8EA;
            .infoDiv{
                width: 803px;
                // height: 800px;
                min-height: 650px;
                margin: 0 auto;
                .userInfo{
                    width: 541px;      
                    .qx{
                        div{
                            width: 460px;
                            height: 36px;
                            vertical-align: text-top;
                            display: inline-block;
                        }
                    }
                    
                }
                Button{
                    width: 150px;
                    height: 40px;
                    box-shadow: 4px 4px 4px 0 rgba(240,100,115,0.21);
                    margin-top: 36px;
                    margin-left: 194px;
                    font-size: 16px;
                }
                .head{
                    display: inline-block;
                    width: 200px;
                    height: 260px;
                    vertical-align: top;
                    margin-left: 57px;
                    div{
                        width: 200px;
                        height: 200px;
                        border: 1px solid #E3E8EA;
                        padding: 8px;
                        img{
                            width: 100%;
                            height: 100%;
                        }                        
                    }
                    p{
                        width: 80px;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        color: #FE9333;
                        border:1px solid @primary-color;
                        text-align: center;
                        border-radius: 4px;
                        cursor: pointer;
                        margin-left: 60px;
                        margin-top: 20px;
                    }

                }
                //第三方绑定
                .threeTitle{
                    text-align: center;
                    font-size: 14px;
                    color:#686E71;
                    line-height: 22px;
                    margin-bottom: 30px;
                }
                .threeDiv{
                    width: 510px;
                    height: 110px;
                    margin: 0 auto 20px;
                    background-color: #FFFAF6 ;
                    .img{
                        width: 96px;
                        height: 96px;
                        // box-shadow: 4px 4px 8px 0 rgba(107,178,255,0.40);
                        margin: 7px 0 0 40px;
                    }
                    .data{
                        display: inline-block;
                        height: 110px;
                        width: 310px;
                        vertical-align: bottom;
                        padding-top: 30px;
                        padding-left: 14px;
                        .p1{
                            font-size: 16px;
                            font-weight: bold;
                            color:#686E71;
                            line-height: 22px;
                            margin-bottom: 6px;
                            span{
                                float: right;
                                font-weight: normal;
                                font-size: 14px;
                                cursor: pointer;
                                color:#FE9333;
                            }
                            .no{
                                color:#4CB2EB;
                            }
                        }
                        .p2{
                            line-height: 22px;
                            font-size: 14px;
                            color: #686E71;
                            span{
                                color:#FE9333;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
<<style lang="less">
    .userInfo{
        display:inline-block;
        font-size:14px;
        .ivu-form-item{
            margin-right:0px;
            margin-bottom:10px;
        }
        
        .ivu-form-item-label{
            font-size:14px;
            color:#686E71;
            padding: 16px 22px 16px 0;
        }
        .ivu-input{
            height:40px;
            // line-height:40px;
            width: 460px;
        }
        .name{
            .ivu-input{
                width: 250px;
            }
        }
        .sex{          
            .ivu-select{
                width: 130px;
                height:40px;
                line-height:40px;
                font-size:14px;
                .ivu-select-selection{
                    height:40px;
                    line-height:40px;
                    .ivu-select-placeholder{
                         height:40px;
                        line-height:40px;
                    }
                    .ivu-select-selected-value{
                        height:40px;
                        line-height:40px;
                    }
                    
                }
            }
            .ivu-select-item{
                // padding:0 0 0 8px;
            }
        }
        .ivu-input-icon{
            width: 40px;
            height:40px;
            line-height:40px;
        }
        .jzd{
            .ivu-select{
                width: 152px;
                height:40px;
                line-height:40px;
                .ivu-select-selection{
                    height:40px;
                    line-height:40px;
                    .ivu-select-placeholder{
                         height:40px;
                        line-height:40px;
                    }
                    .ivu-select-selected-value{
                        height:40px;
                        line-height:40px;
                    }                   
            }
        }
        .ivu-select-item{
                // padding:0 0 0 8px;
        }
        .ivu-input-type{
            margin-top:10px;
        }
    }
}
</style>

<template>
	<div>
        <!--左侧个人导航-->
        <v-userCenter class="leftCenter" :li1="li1" :li2="li2" :li3="li3" :li4="li4" :headerPicture="account.headerPicture" :username="account.nickname"></v-userCenter>
        <!--右侧内容-->
        <div class="rightCenter">
            <!--标题-->
            <div class="title">
                <span :class="jcdataClass" @click="chooset1()">基础信息</span>
                <span :class="threebing" @click="chooset2()" >第三方绑定</span>
            </div>
            <!--内容-->
            <div class="info" v-if="t1t2">
                <div class="infoDiv">
                    <Form :model="account" label-position="right" :label-width="78" class="userInfo" inline>
                        <Form-item label="昵称" class="name">
                            <Input v-model="account.nickname" placeholder="请输入您的真实姓名" :maxlength="10"></Input>
                        </Form-item>
                        <Form-item label="性别"  class="sex">
                            <Select class=" " placeholder="性别" v-model="account.gender">
                                <Option value="M" >{{ '男' }}</Option>
                                <Option value="F" >{{ '女' }}</Option>
                                <Option value="O" >{{ '保密' }}</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="生日">
                           <Date-picker type="date" placement="bottom-start" placeholder="选择日期"   :value="account.birthDay" @on-change="timeChange"  :editable="false"></Date-picker>
                        </Form-item>
                        <Form-item label="居住地" class="jzd">
                            <Select  v-model="account.residenceProvinceId" class="Selectprovince" placeholder="请选择省">
                                <Option value="" label-in-value="true">{{"请选择省"}}</Option>																						
                                <Option v-for="item in provinceList" :value="item.areaId" :key="item" label-in-value="true">{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account.residenceCityId" placeholder="请选择市">
                                <Option value="" label-in-value="true">{{"请选择市"}}</Option>																						                                
                                <Option v-for="item in cityList" :value="item.areaId" :key="item" >{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account.residenceAreaId" placeholder="请选择区">
                                <Option value="" label-in-value="true">{{"请选择区"}}</Option>
                                <Option v-for="item in districtList" :value="item.areaId" :key="item">{{ item.areaName }}</Option>
                            </Select>
                            <Input v-model="account.residenceAddrDetail" placeholder="请输入详细地址" :maxlength="50"></Input>
                        </Form-item>
                        <Form-item label="籍贯" class="jzd">
                            <Select  v-model="account.originPlaceProvinceId" class="Selectprovince" placeholder="请选择省">
                                <Option value="" label-in-value="true">{{"请选择省"}}</Option>                                
                                <Option v-for="item in provinceList2" :value="item.areaId" :key="item" label-in-value="true">{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account.originPlaceCityId" placeholder="请选择市">
                                <Option value="" label-in-value="true">{{"请选择市"}}</Option>                                                                
                                <Option v-for="item in cityList2" :value="item.areaId" :key="item" >{{ item.areaName }}</Option>
                            </Select>
                            <Select  v-model="account.originPlaceAreaId" placeholder="请选择区">
                                <Option value="" label-in-value="true">{{"请选择区"}}</Option>                                                                                                
                                <Option v-for="item in districtList2" :value="item.areaId" :key="item">{{ item.areaName }}</Option>
                            </Select>
                            <Input v-model="account.originPlaceAddrDetail" placeholder="请输入详细地址" :maxlength="50"></Input>
                        </Form-item>
                        <Form-item label="权限" class="qx">                           
                                <Radio-group v-model="account.authorityLevel">
                                    <Radio label="1" value="">{{"仅自己可见"}}</Radio>
                                    <Radio label="2" value="">{{"公开"}}</Radio>
                                    <Radio label="3" value="">{{"亲友可见"}}</Radio>
                                </Radio-group>                           
                        </Form-item>
                    </Form>
                    <!--头像-->
                    <div class="head">
                        <div><img :src=" account.headerPicture ? imgurl +  account.headerPicture : staticimg+'/images/boy-2.png' " /></div>
                        <p @click="changeImg()">替换头像</p>
                    </div>
                    <Button type="warning" @click="saveInfo()">保存</Button>
                </div>
            </div>
            <!--第三方绑定-->
            <div class="info" v-if="!t1t2">
                <div class="infoDiv">
                    <p class="threeTitle">绑定第三方账号，可以直接登录星星网，还可以将星星网内容同步到以下平台，与更多好友分享。</p>
                    <div class="threeDiv">
                        <img  class="img" src="../../images/usercenter_qq.png"/>
                        <div class="data">   
                            <p class="p1">绑定QQ账号<span class="no" v-if="isQQBind" @click.stop="stopQQBind()">解除绑定</span></p>
                            <p class="p2" v-if="isQQBind">已绑定：<span>{{QQNickName}}</span></p>                       
                            <p class="p2" style="cursor: pointer;" @click.stop="QQBind()" v-else>点击绑定</p>                     
                        </div>                           
                    </div>
                    <div class="threeDiv">
                        <img  class="img" src="../../images/usercenter_wechat.png"/>
                        <div class="data">   
                            <p class="p1">绑定微信账号<span class="no" v-if="isWxBind" @click.stop="stopweChatBind()">解除绑定</span></p>
                            <p class="p2" v-if="isWxBind">已绑定：<span>{{weixinNickName}}</span></p>                       
                            <p class="p2" style="cursor: pointer;" @click.stop="weChatBind()" v-else>点击绑定</p>                        
                        </div>                           
                    </div>
                </div>
            </div>
        </div> 
        <!--更换头像-->
        <my-upload field="avatar"
        @crop-upload-success="cropUploadSuccess"
        :crop=false
        v-model="show"
		:width="184"
		:height="184"
		:url="hotsimg+'/account/uploadAvatar/v2'"
		:params="params"
		:headers="tokendata"
		img-format="png"></my-upload>
	</div>
</template>
<script>
    import global from '../../config/global'
    import myUpload from 'vue-image-crop-upload/upload-2.vue';
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
        data() {
			return {
                imgurl:global.imgurl,
                staticimg:global.staticimg,
				videourl:global.videourl,
                musicurl:global.musicurl,
                threeUrl:global.threeUrl,
                formRight:"",
                province:"",
				city:"",
				district:"",
                province2:"",
				city2:"",
				district2:"",
				provinceList:[],
				cityList:[],
				districtList:[],
                provinceList2:[],
				cityList2:[],
				districtList2:[],
                animal:"",
                jcdataClass:"on",//基础信息class名字
                threebing:"",//第三方绑定class名字
                t1t2:true,//切换
                li1:"li1 on1",
                li2:"li2",
                li3:"li3",
                li4:"li4",
                account:{
                    "nickname":'',
                    "gender":'',
                    "birthDay":'',                   
                    "residenceProvinceId":'',//居住地省份
                    "residenceCityId":'',
                    "residenceAreaId":'',
                    "residenceAddrDetail":'',
                    "originPlaceProvinceId":'',//籍贯省份
                    "originPlaceCityId":'',
                    "originPlaceAreaId":'',
                    "originPlaceAddrDetail":'',
                    "authorityLevel":'',//权限
                    "headerPicture":''
                },//用户基础信息
                createTime:"",
                hotsimg:"",//图片路径前缀
                show:false,//修改头像弹层
                tokendata:"",//
                headerPicture:"",
                username:"",
                isWxBind:false,
                isQQBind:false,
                QQNickName:"",
                weixinNickName:"",
			}
		},
        created() {
            this.ajax();            
           
		},
        watch:{
            "$route": "ajax",
			"account.residenceProvinceId":"getprovince",//居住地
			"account.residenceCityId":"getcity",//
            "account.originPlaceProvinceId":"getprovince2",//籍贯
            "account.originPlaceCityId":"getcity2",//
		},
		methods: {
            filter(value) {//value为13位的时间戳
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(value));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return y + '.' + add0(m) + '.' + add0(d) + '';
			},
            ajax(){                
                this.hotsimg = global.host;  
                this.tokendata={"Authorization":this.user.token_type+" "+this.user.access_token}
                var this_=this;
                 this.$http.get(global.host+'/account/info/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                 .then((response) => {	
                     this.account = Object.assign(this.account, response.body.account);
                     this.account.originPlaceProvinceId ?  this.account.originPlaceProvinceId: this.account.originPlaceProvinceId="";
                     this.account.originPlaceCityId ?  this.account.originPlaceCityId: this.account.originPlaceCityId="";
                     this.account.originPlaceAreaId ?  this.account.originPlaceAreaId: this.account.originPlaceAreaId="";
                     this.account.residenceProvinceId ?  this.account.residenceProvinceId: this.account.residenceProvinceId="";
                     this.account.residenceCityId ?  this.account.residenceCityId: this.account.residenceCityId="";
                     this.account.residenceAreaId ?  this.account.residenceAreaId: this.account.residenceAreaId="";
                     this.createTime =  response.body.account.createTime;
                     this_.Getprovince();
                     this_.Getprovince2();     
                     if(this.account.nickname==null || this.account.nickname == ''){
                        this.account.nickname = this.account.mobile;
                     }            
                     localStorage.setItem("headerImg", this.account.headerPicture);    
                     localStorage.setItem("nickname", this.account.nickname);
				})
				.catch(function (response) {
					
				});
            },
            Getprovince(){//获取省
                this.$http.get(global.host+'/location/province/all/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.provinceList = response.body.data;
				})				
            },
            Getprovince2(){//获取省 籍贯
                this.$http.get(global.host+'/location/province/all/query',{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.provinceList2 = response.body.data;
				})
            },
            getprovince(value){
				//查询市
				this.$http.get(global.host+"/location/city/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.cityList = response.body.data;
				})					
			},
             getprovince2(value){
				//查询市
				this.$http.get(global.host+"/location/city/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.cityList2 = response.body.data;
				})					
			},
			getcity(value){
				//查询区
				this.$http.get(global.host+"/location/district/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.districtList = response.body.data;
				})					
			},
            getcity2(value){
				//查询区
				this.$http.get(global.host+"/location/district/query?parentId="+value,{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
					this.districtList2 = response.body.data;
				})					
			},
            chooset1(){//基础信息
                this.jcdataClass = "on";
                this.threebing = "";
                this.t1t2 = true;
            },
            chooset2(){//基础信息
                this.jcdataClass = "";
                this.threebing = "on";
                this.t1t2 = false;
                this.$http.get(global.host+"/account/getThirdPartyBinding/info",{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
				.then((response) => {	
                    if(response.body.status == 1){
                        this.isQQBind = response.body.isBindingQQ == 1 ? true: false;
                        this.isWxBind = response.body.isBindingWeixin == 1 ? true: false;
                        this.QQNickName = response.body.QQNickName;
                        this.weixinNickName = response.body.weixinNickName;
                    }
				})
            },
            saveInfo(){//保存基本信息
                console.log(this.account.birthDay);
                if(this.account.nickname == ""){
                    this.$Message.error("请填写真实姓名");
                    return;
                }
                this.$http.post(global.host+'/account/save',
                {
                    "nickname":this.account.nickname,
                    "gender":this.account.gender,
                    "birthDay":this.account.birthDay,                   
                    "residenceProvinceId":this.account.residenceProvinceId,//居住地省份
                    "residenceCityId":this.account.residenceCityId,
                    "residenceAreaId":this.account.residenceAreaId,
                    "residenceAddrDetail":this.account.residenceAddrDetail,
                    "originPlaceProvinceId":this.account.originPlaceProvinceId,//籍贯省份
                    "originPlaceCityId":this.account.originPlaceCityId,
                    "originPlaceAreaId":this.account.originPlaceAreaId,
                    "originPlaceAddrDetail":this.account.originPlaceAddrDetail,
                    "authorityLevel":this.account.authorityLevel,//权限
                    "headerPicture":this.account.headerPicture
                },
                {headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})
                .then((response) => {	
                    if(response.body.status == 1){
                        this.$Message.success(response.body.message);
                        localStorage.setItem("nickname", this.account.nickname);
                    }else{
                        this.$Message.error(response.body.message);
                    }
				})
				.catch(function (response) {
					
				});

            },
            changeImg(){
               this.show = !this.show;
            },
             cropUploadSuccess(jsonData, field){
                this.account.headerPicture=jsonData.avatar;
                localStorage.setItem("headerImg", this.account.headerPicture);

			},
            timeChange(data){
                this.account.birthDay = data;    
            },
            weChatBind(){//微信绑定
                var this_=this;
                window.sx=this_.weChatCallBack;
				window.open("https://open.weixin.qq.com/connect/qrconnect?appid=wx5364bc6a94eff485&redirect_uri="+this.threeUrl+"/returnlogin&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect","childwindow",'width=600,height=600')
            },
            weChatCallBack(code){//回调
                this.$http.post(global.host+'/third/weixin/binding',{"code":code},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})	//确认登录之后上面那个alert没弹
                .then((response) => {
                    if(response.body.status == 1){
                        this.$Message.success(response.body.message);   
                        this.chooset2();
                    }else{
                        this.$Message.error(response.body.message);
                    }
                })
            },
            QQBind(){//QQ绑定
                window.qqcallbackFn=this.qqcallbackFn
				//重定向地址，需要进行UrlEncode（登录成功回调的地址）
				var redirectURI = encodeURIComponent(this.threeUrl+"/returnqqbind");
				//打开QQ登录的界面
				QC.Login.showPopup({
					appId:"101368012",		 //应用唯一标识，在QQ互联平台提交应用审核通过后获得
					redirectURI:redirectURI, //重定向地址，需要进行UrlEncode（登录成功回调的地址）
					responseType:"code"		 //响应类型
				});
            },
            qqcallbackFn(response){
                this.chooset2();
				console.log(response);
            },
            stopQQBind(){
                this.$http.post(global.host+'/third/qq/binding/remove',{},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})	//确认登录之后上面那个alert没弹
                .then((response) => {
                    if(response.body.status == 1){
                        this.$Message.success(response.body.message);
                        this.chooset2();
                    }
                })
            },
            stopweChatBind(){
                this.$http.post(global.host+'/third/weixin/binding/remove',{},{headers:{"Authorization":this.user.token_type+" "+this.user.access_token}})	//确认登录之后上面那个alert没弹
                .then((response) => {
                    if(response.body.status == 1){
                        this.$Message.success(response.body.message);
                        this.chooset2();
                    }
                })
            },

		},
        components: {
            'my-upload': myUpload,
        },
    }
</script>